<style>
	
</style>
<template>
<div>
    <Card :bordered="false" dis-hover>
        <p slot="title">进项发票使用明细</p>
        <Row :gutter="20">
			<Col span="6">
				<Input v-model="search.invoiceNo" placeholder="发票号码" ></Input>
			</Col>
			<!-- <Col span="6">
				<Input v-model="search.paramData.number" placeholder="订单号" ></Input>
			</Col> -->
			<!-- <Col span="10">
				<DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm" 
				placeholder="开票日期" v-model="search.paramData.startDate" style="width:100%;"></DatePicker>
			</Col> -->
			<Col span="2">
				<Button type="primary" icon="ios-search" @click="getdata('search')">搜索</Button>
			</Col>
		</Row>

		
		<br/>
	    <div class="ivu-table-wrapper" >
            <div class="ivu-table ivu-table-with-fixed-top ">
                
                <div class="ivu-table-body" >
                    <table class="table_border _table"  cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
	                    
                    	<thead>
		                    <tr>
		                    	<!-- <th class="" style="width:60px;">
			                        	<div class="ivu-table-cell">
			                        		<Checkbox v-model="check" lable="" @on-change="checkchange"></Checkbox>
			                        	</div>
			                        </th> -->
		                        <th class="">
		                            <div class="ivu-table-cell">
		                                <span>销方单位代码</span>
		                            </div>
		                        </th>
		                        <th class="">
		                            <div class="ivu-table-cell">
		                                <span>销方单位名称</span>
		                            </div>
		                        </th>
		                        <th class="" >
		                            <div class="ivu-table-cell">
		                                <span>总数量</span>
		                            </div>
		                        </th>
		                        <th class="">
		                            <div class="ivu-table-cell">
		                                <span>剩余数量</span>
		                            </div>
		                        </th>
		                        <th class="">
		                            <div class="ivu-table-cell">
		                                <span>发票代码</span>
		                            </div>
		                        </th>
		                        <th class="">
		                            <div class="ivu-table-cell">
		                                <span>发票号码</span>
		                            </div>
		                        </th>
		                        <th class="" style="width:100px;">
		                            <div class="ivu-table-cell">
		                                <span>日期</span>
		                            </div>
		                        </th>
		                        <th class="" style="width:170px;">
		                            <div class="ivu-table-cell">
		                                <span>操作</span>
		                            </div>
		                        </th>
		                    </tr>
	                    </thead>
	                    <tbody class="ivu-table-tbody" v-for="item in data">
		                    <tr class="ivu-table-row">
		                    	<!-- <td class="">
			                            <div class="ivu-table-cell">
			                        		<Checkbox v-model="item.check" lable=""></Checkbox>
			                        	</div>
			                        </td> -->
		                        <td class="">
		                            <div class="ivu-table-cell">
		                                <span>
		                                    {{item.seller_tax_no}}</span>
		                            </div>
		                        </td>
		                        <td class="">
		                            <div class="ivu-table-cell">
		                                <span>{{item.seller_name}}</span>
		                            </div>
		                        </td>
		                        <td class="">
		                            <div class="ivu-table-cell">
		                                <span>{{item.total_goods_amount}}</span>
		                            </div>
		                        </td>
		                        <td class="">
		                            <div class="ivu-table-cell">
		                                <span>{{item.left_amount }}</span>
		                            </div>
		                        </td>
		                        <td class="">
		                            <div class="ivu-table-cell">
		                                <span>{{item.invoice_code}}</span>
		                            </div>
		                        </td>
		                        <td class="">
		                            <div class="ivu-table-cell">
		                                <span>{{item.invoice_no}}</span>
		                            </div>
		                        </td>
		                        <td class="">
		                            <div class="ivu-table-cell">
		                                <span>{{item.invoice_date   | formatDate('yyyy-MM-dd')}}</span>
		                            </div>
		                        </td>
		                        <td class="">
		                            <div class="ivu-table-cell">
		                                <Button @click="show(item)" size="small" >添加使用记录</Button>
		                                <Button @click="_show(item)" size="small" >
		                                {{item.show?'收起':'详情'}}</Button>


		                            </div>
		                        </td>
		                    </tr>
		                    <tr class="tr_1" v-show="item.show">
		                        <td colspan="8">
		                        	<div style="margin:0px 20px;">
		                        		<table class="table_7b">
		                        			<thead>
		                        				<th>发票代码</th>
		                        				<th>发票号码</th>
		                        				<th>本次使用数量</th>
		                        				<th>操作时间</th>
		                        			</thead>
			                                <tbody>
			                                    <tr v-for="iu in item.list">
			                                        <td>{{iu.incomeInvoiceCode}}</td>
			                                        <td>{{iu.incomeInvoiceNo}}</td>
			                                        <td>{{iu.invoiceAmount}}</td>
			                                        <td>{{iu.createDate}}</td>
			                                    </tr>
			                                </tbody>
		                            </table>
		                        	</div>
		                            
		                        </td>
		                    </tr>
	                    </tbody>
                    </table>
                    <div class="body_empty" v-if="data.length==0 ">
                    	暂无数据
                    </div>
                </div>
            </div>
            
        </div>
        <p style="margin-top:10px;">
        	<!-- <Button type="primary" @click="add">添加补录订单</Button> -->
	        <Page  show-total :page-size="search.pageSize" :current="search.currentpage"	
	        :total="page.total" 
       		show-total @on-change="changePage" style="float:right;"></Page>
        </p>
    </Card>
    <makeup-edit @refresh="getdata"></makeup-edit>
</div>	
</template>
<script>
import MakeupEdit from "../Module/makeupedit.vue";
export default {
	components:{MakeupEdit},
	data (){
		return {
			check:false,
			page:{total:0},
			search:{pageSize:10,currentpage:1,orderNo:null},
			data:[
				
			]
		}
	},methods:{
		changePage (pageNum){
			this.search.currentpage = pageNum;
     		this.getdata();
		},getdata(type){
			if(type=='search'){
				this.search.currentpage=1;
			}
			if(this.search.invoiceNo==''){
				this.search.invoiceNo=null;
			}
			this.axios.post('/invoice/income/findByPage',
				this.search).then((res)=>{
				console.log(res);
				var d=res.data.list;
				for(var i=0;i<d.length;i++){
					d[i].show=false;
				}
				this.data=d;
				this.page.total=res.data.total;
				this.search.currentpage=res.data.pageNo || 1;
			})
		},show(item){
			//console.log(item)
			this.$bus.emit('bus_makeupedit',item)
		},checkchange(item){
			this.data.forEach(function(val){
				val.check=item;
			})
		},add(){
			this.$bus.emit('bus_makeupedit')
		},_show(item){
			if(!item.list){
				this.axios.post('/incomeinvoice/usedrecord/'+item.guid,
					{}).then((res)=>{
						console.log(res);
					item.list=res.data;
					item.show=!item.show;
				})
			}else{
				item.show=!item.show;
			}
		}
	},mounted(){
		$('._table').resizableColumns({});
	},created(){
		this.getdata();
	},activated(){
		this.getdata();
	}
}
</script>